<template>
        

    <el-card class="box-card">
         <el-card class="box-css">
            <p><font class="font-css">{{count}}</font></p>
          <font>总运单数(单)</font>
         <el-button type="primary" round class="button-box">立刻查看</el-button>
        </el-card>
         <el-card class="box-css">
             <p><font class="font-css">{{ecount}}</font></p>
         <font>总设备数</font>
           <el-button type="primary" round class="button-box">立刻查看</el-button>
        </el-card>
         <el-card class="box-css">
             <p><font class="font-css">{{incount}}</font></p>
         <font>在途运单</font>
         <el-button type="primary" round class="button-box">立刻查看</el-button>
        </el-card>
         <el-card class="box-css">
             <p><font class="font-css">{{warcount}}</font></p>
         <font>立即报警</font>
         <el-button type="primary" round class="button-box">立刻查看</el-button>
        </el-card>
       <!--  安装v-charts模块 -->
        <!-- npm i v-charts echarts -S -->
         <el-card class="box-css1">
           <ve-line :data="chartData" style="width:600px;height:400px;"></ve-line>
        </el-card>

        </el-card>
    
       
    </template>
    
    <script>
     import {dashnum} from '../api/api'
    
        export default {
    
            data(){
                return {
                    msg:'你好，这里是首页',
                    count:'',
                    ecount:'',
                    incount:'',
                    warcount:'',
                    chartData: {
                    columns: ['日期', '总运单数', '总设备数', '在途运单','报警数'],
                    rows: [
                     { '日期': '1/1', '总运单数': 12, '总设备数': 3, '在途运单': 1,'报警数':0 },
                      { '日期': '1/2', '总运单数户': 12, '总设备数':  3, '在途运单': 1,'报警数':0 },
                      { '日期': '1/3', '总运单数': 12, '总设备数':  3, '在途运单': 1,'报警数':0 },
                      { '日期': '1/4', '总运单数': 12, '总设备数':  3, '在途运单': 1 ,'报警数':0},
                      { '日期': '1/5', '总运单数': 12, '总设备数':  3, '在途运单': 1 ,'报警数':0},
                      { '日期': '1/6', '总运单数': 12, '总设备数':  3, '在途运单': 1,'报警数':0 }
                    ]
                 }
                    
                }
            },
            //定义组建标签
            components:{
            },
            filters: {
     
　　},
            //自定义方法
            methods:{
                get_num:function(){
                 dashnum().then( res => {
                   this.count=res.count
                   this.ecount=res.ecount
                   this.incount=res.incount
                   this.warcount=res.warcount
         
              })

                }
    
            },
            //钩子方法
            mounted:function(){
                this.get_num();

      
    
            },
            //监听属性
            watch:{
    
    
            },
            //计算属性
            computed:{
    
    
            }
    
    
    
        }
    
    
    </script>
    
    <style>
    .font-css{
        font-size:25px;
        padding-left:60px;

    }
.button-box{
    margin-left:20px;
}
    font{
        
        padding-left:40px;

    }
    .box-css1{
      width:1100px;
      height:400px;
       background:#e6e9ee;
        margin-top:100px;
        margin-left:80px;

    }
    .box-css{
        background:#e6e9ee;
        height:200px;
        width:200px;
        float:left;
        margin-left:80px;
        margin-top:50px;
    }
    .box-card{
        
    height:800px;

    }
    
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .container-title {
    font-size: 20px;
    line-height: 32px;
    font-weight: normal;
    color: #39486c;
  }
  .fl {
    float: left;
  }
  .btn-add {
    display: inline-block;
    width: 100px;
    height: 32px;
    font-weight: normal;
    font-size: 12px;
    line-height: 32px;
    border-radius: 3px;
    color: #fff;
    text-indent: 36px;
    background: #547edf url(http://lilly.zenm.vip/images/icon-add-btn.png) 16px center no-repeat;
}
.fr {
    float: right;
}
a {
    text-decoration: none;
}
.iot-table {
    width: 100%;
    font-size: 11px;
    color: #39486c;
    line-height: 48px;
}
table {
    background-color: transparent;
    border-spacing: 0;
    border-collapse: collapse;
    
}

thead{
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
.amap-page-container {
      height: 400px;  
      width: 400px;
      float:left
    }

    
    </style>